import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { Header, Loading } from 'src/components'
import { CONFIRM_REMARK } from 'src/redux/action-type'
import { getRemark } from 'src/api/getData'
import { useQuery } from 'src/utils/hooks'
import classNames from 'classnames'
import './index.scss'

const Remark = () => {
    const query = useQuery()
    const dispatch = useDispatch()
    const history = useHistory();
    // const [id, setId] = useState(query.id)
    // const [sig, setSig] = useState(query.sig)
    const [remarkList, setRemarkList] = useState()
    const [showLoading, setShowLoading] = useState(true)
    const [remarkText, setRemarkText] = useState({})
    const [inputText, setInputText] = useState()



    useEffect(() => {
        //初始化信息
        const initData = async () => {
            let res = await getRemark(query.id, query.sig);
            setRemarkList(res)
            setShowLoading(false)
        }
        initData()
    }, [query.id, query.sig])


    //选择备注
    const chooseRemark = (index, remarkIndex, text) => {
        remarkText[index] = [remarkIndex, text];
        setRemarkText(Object.assign({}, remarkText))
    }
    //确认选择
    const confirmRemark = () => {
        dispatch({
            type: CONFIRM_REMARK,
            remarkText: remarkText,
            inputText: inputText
        })
        history.go(-1);
    }

    return <div className="page_confirmorder_remark">
        {!showLoading && <section>
            <Header title="订单备注" goBack></Header>
            {remarkList.remarks.length > 0 && <section className="quick_remark">
                <header className="header_style">快速备注</header>
                <ul className="remark_arr_list_ul">
                    {
                        remarkList.remarks.map((item, index) => {
                            return <li className="remark_arr_list_li" key={index}>
                                {
                                    item.map((remarkTtem, remarkIndex) => {
                                        return <span
                                            className={classNames('remark_item_li', {
                                                first: remarkIndex === 0,
                                                last: remarkIndex === item.length - 1,
                                                choosed: remarkText[index] && (remarkText[index][0] === remarkIndex)
                                            })}
                                            key={remarkIndex}
                                            onClick={() => chooseRemark(index, remarkIndex, remarkTtem)}>{{ remarkTtem }}</span>
                                    })
                                }
                            </li>
                        })
                    }
                </ul>
            </section>}
            <section className="input_remark quick_remark">
                <header className="header_style">其他备注</header>
                <textarea
                    className="input_text"
                    value={inputText}
                    onInput={(e) => setInputText(e.target.value)}
                    placeholder="请输入备注内容(可不填)"
                ></textarea>
            </section>
            <div className="determine" onClick={confirmRemark}>确定</div>
        </section>}
        {showLoading && <Loading />}
    </div>
}

export default Remark